﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>
        function smear(img) {
            // create offscreen canvas the same size as img
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;

            // copy the image into the canvas, then extract its pixels
            var context = canvas.getContext('2d');
            context.drawImage(img, 0, 0);
            var pixels = context.getImageData(0, 0, img.width, img.height);

            var worker = new Worker('smearWorker.js');
            worker.postMessage(pixels);

            // register a handler to get the worker's response
            worker.onmessage = function(e) {
                var smeard_pixels = e.data;
                context.putImageData(smeard_pixels, 0, 0);
                img.src = canvas.toDataURL();
                worker.terminate();
                canvas.width = canvas.height = 0;
            }
        }
    </script>
</head>
<body>
<img src="/Lighthouse.jpg" alt="" onclick="smear(this)" />
</body>
</html>